<template>
	<view class="sign-box">
		<view class="details-header">
			<image @click="goBack"
				src="https://zsw-bimface-res.izsw.net/img/bim-community/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png" mode="">
			</image>
			<view>返回</view>
		</view>
		<view class="sign-title">
			<image src="./sign.png" mode=""></image>
		</view>
		<!-- 签到面板 -->
		<view class="sign-panel">
			<view class="sgin-item-box">
				<view class="sign-item" v-for="(item, index) in signList" :key="index"
					:class="item.isSignIn ? 'signed' : ''" @click="userReplaceSignIn(item)">
					<view class="sign-text">{{ index + 1 }}</view>
				</view>
				<span class="register_btn" @click="register">签 到</span>
			</view>
		</view>
		<view class="sign-progress-box">
			<view class="sign-progress-bar">
				<view class="sign-progress-bar-line" :style="{ width: percentage + '%' }"></view>
			</view>
			<view class="sign-progress-data">
				<view class="data-item">7天</view>
				<view class="data-item">14天</view>
				<view class="data-item">21天</view>
				<view class="data-item">28天</view>
			</view>
		</view>
		<view class="sign-gift-box">
			<view class="sign-gift-item" v-for="(item, index) in awardList" :key="index">
				<view class="gift-box-item-up">
					<view class="gift-box-item-left">
						{{ item.day }}天
					</view>
					<view class="gift-box-item-right">
						<image class="img-box" :src="item.img"></image>
						<view class="gift-name">
							{{ item.pname }}
						</view>
					</view>
				</view>
				<button :disabled="item.locked" :class="{ 'sign-gift-btn': !item.locked, 'sign-gift-disBtn': item.locked }" @click="setAwardData(item)"></button>
			</view>
		</view>
		<navigator url="/pages/rule/rule/rule?id=11">
				<view class="rules">
					签到规则
				</view>
			</navigator>
		<uni-popup ref="popup" type="bottom" background-color="#fff" :mask-click="false">
			<view class="addreTitle">
				我的收获地址
			</view>
			<ul class="addres_box">
				<li v-for="addres in defaultAddres" :key="addres.id" class="address_box"
					:class="addres.id == awardData.addressId ? 'active' : ''" @click="setAddress(addres, 'defau')">
					<view>
						<span class="x-tag">{{ addres.tag }}</span><span class="address">{{ addres.address }}</span>
					</view>
					<view class="">
						<span class="consignee">{{ addres.consignee }}</span><span class="phone">{{ addres.phone
							}}</span>
					</view>
				</li>
				<li v-for="addres in addresList" :key="addres.id" class="address_box"
					:class="addres.id == awardData.addressId ? 'active' : ''" @click="setAddress(addres, 'addres')">
					<view>
						<span class="x-tag">{{ addres.tag }}</span><span class="address">{{ addres.address }}</span>
					</view>
					<view class="">
						<span class="consignee">{{ addres.consignee }}</span><span class="phone">{{ addres.phone
							}}</span>
					</view>
				</li>
			</ul>
			<view class="foot_group">
				<span class="" @click="getAward">确认</span>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {
	getSignInCondit,
	getSignInAward,
	userRegister,
	getSignInProgress,
	userReplace,
	userGetAward,
	getAddresses
} from "../../api/user.js"
export default {
	data() {
		return {
			signList: [], // 签到列表
			awardList: [], // 奖励列表
			percentage: 0, // 占比情况
			addresList: [], // 地址列表
			defaultAddres: [], // 默认地址
			awardData: {},// 领取奖励参数
			longDay: 0, // 累计签到天数
		}
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	mounted() {
		this.init()
	},
	methods: {
		goBack() {
			uni.navigateTo({
				url: "/pages/center/assignment"
			})
		},
		init() {
			this.getUserSign()
			// this.getAwardList()
		},
		// 获取用户签到情况
		getUserSign() {
			let targetId = this.userInfo.id;
			getSignInCondit(targetId).then((res) => {
				if (res.code == '200') {
					this.signList = res.data;
					this.getProgress()
				} else {
					this.signList = []
				}
			})
		},
		//用户签到奖励列表
		getAwardList() {
			let targetId = this.userInfo.id;
			getSignInAward(targetId).then((res) => {
				if (res.code == '200') {
					this.awardList = res.data
					console.log(this.longDay);
					this.awardList.forEach(item => {
						if (item.day > this.longDay) {
							item.locked = true
						} else {
							item.locked = false
						}
						return item.locked
					})
					console.log(this.awardList);
					
				} else {
					this.awardList = []
				}
			})
		},
		getProgress() {
			let targetId = this.userInfo.id;
			getSignInProgress(targetId).then((res) => {
				if (res.code == '200') {
					this.longDay = res.data.longDay;
					// let total = this.signList.length;
					let total = 28;
					this.percentage = parseInt((this.longDay / total).toFixed(2) * 100)
					if (this.percentage > 100) {
						this.percentage = 100
					}
					this.getAwardList();
				}
			})
		},
		// 用户签到
		register() {
			let data = {
				targetId: this.userInfo.id,
			}
			userRegister(data).then((res) => {
				if (res.code == '200') {
					uni.showToast({
						title: "恭喜您签到获得" + res.message,
						duration: 3000
					});
					this.getUserSign()
				} else {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: "error"
					});
				}
			})
		},
		// 用户补签
		userReplaceSignIn(item) {
			let data = {
				targetId: this.userInfo.id,
				day: item.day
			}
			let that = this
			uni.showModal({
				title: '确定补签',
				content: '当前补签需要支付' + item.replaceMoney + '个镇北币',
				success: function (res) {
					if (res.confirm) {
						userReplace(data).then((res) => {
							if (res.code == '200') {
								uni.showToast({
									title: "恭喜您补签获得" + res.message,
									duration: 2000,
								});
								that.getUserSign()
							} else {
								uni.showToast({
									title: res.message,
									duration: 2000,
									icon: "error"
								});
							}
						})
					} else if (res.cancel) {
						console.log('取消');
					}
				}
			});

		},
		// 领取签到奖励
		setAwardData(item) {
			console.log(item);
			console.log(this.longDay);
			if (item.receive) {
				uni.showToast({
					title: "已领取！",
					duration: 3000,
					icon: "error"
				});
				return
			}
			if (item.day > this.longDay) {
				// console.log("尚未达成领取条件！")
				uni.showToast({
					title: "尚未达成领取条件！",
					duration: 3000,
					icon: "error"
				});
				return
			}
			this.awardData = {
				uid: this.userInfo.id,
				pid: item.pid,
				id: item.id,
				day: item.day,
				addressId: ""
			}
			if (item.type == '4') {
				this.getAward()
			} else {
				this.openAddress()
			}


		},
		// 打开地址弹框
		openAddress() {
			let _this = this
			getAddresses(this.userInfo.id).then((res) => {
				if (res.code == '200') {
					_this.defaultAddres = res.data[0] ? res.data[0] : [];
					_this.addresList = res.data[1] ? res.data[1] : [];
					// debugger
					if (_this.defaultAddres.length == 0 && _this.addresList.length == 0) {
						uni.navigateTo({
							url: "/pages/myAddress/index?select=true"
						})
						return
					}
					// console.log(_this.addresList)
					if (_this.defaultAddres.length > 0 && _this.defaultAddres[0]) {
						_this.awardData.addressId = _this.defaultAddres[0].id
						_this.$refs.popup.open('bottom')
						return
					}
					if (_this.defaultAddres.length == 0 && _this.addresList.length > 0) {
						_this.$refs.popup.open('bottom')
					}
				} else {
					_this.addresList = []
					uni.showToast({
						title: res.message,
						duration: 2000,
					});
				}
			})
		},
		// 修改地址
		setAddress(item, type) {
			this.awardData.addressId = item.id
		},
		getAward() {
			userGetAward(this.awardData).then((res) => {
				if (res.code == '200') {
					uni.showToast({
						title: res.message,
						duration: 2000,
					});
					this.getAwardList()
				} else {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: "error"
					});
				}
				this.$refs.popup.close()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.details-header {
	width: 20%;
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-top: 20rpx;
	color: #fff;

	image:nth-child(1) {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
}
.rules {
	width: 130rpx;
	height: 70rpx;
	background-image: url(../../static/fontSize.png);
	background-size: 100%;
	background-repeat: no-repeat;
	position: fixed;
	right: 0;
	top: 150rpx;
	text-align: center;
	line-height: 70rpx;
	border-radius: 40rpx 0 0 40rpx;
	font-size: 25rpx;
}

.sign-box {
	background: #090919 url('./bg.png') no-repeat;
	background-size: 100% auto;
	min-height: 100vh;
}

.sign-title {
	padding-top: 1rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	letter-spacing: 2px;
	margin-bottom: 1rem;
}

.sign-title image {
	width: 50%;
	height: 90rpx;
}

.sign-panel {
	width: 80%;
	margin: 0 auto;
	padding: 1.4rem 0.38rem;
	border-radius: 0.24rem;
	overflow: hidden;
	background-color: #fff;
}

.sgin-item-box {
	display: grid;
	grid-template-columns: repeat(auto-fill, 12%);
	row-gap: 10px;
	column-gap: 0.4rem;
	justify-content: center;
	// line-height: 100%;
	height: 12.5rem;
	padding-bottom: 100rpx;
	position: relative;

	.register_btn {
		position: absolute;
		bottom: 0;
		height: 80rpx;
		line-height: 80rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 200rpx;
		text-align: center;
		border-radius: 40rpx;
		background-image: url(../../static/fontSize.png);
		background-size: 100%;
		background-repeat: no-repeat;

	}
}

.sign-item {
	background: url('./unsign.png') no-repeat;
	background-size: 100% 100%;
	height: 84rpx;

	&.signed {
		background: url('./signed.png') no-repeat;
		background-size: 100% 100%;

		.sign-text {
			display: none;
		}
	}
}

.sign-text {
	text-align: center;
	font-size: 0.4rem;
	padding-top: 0.2rem;
	color: #ff8d1a;
}

.sign-progress {
	&-box {
		padding: 1rem 0;
		width: 80%;
		margin: 0 auto;
	}

	&-bar {
		height: 0.6rem;
		background: #312176;
		border-radius: 50px;
		border: 2px solid #6c6c76;
	}

	&-bar-line {
		height: 100%;
		background: linear-gradient(to right, #6c43ff, #956aff);
		border-radius: 50px;
	}

	&-data {
		padding-top: .5rem;
		display: flex;
		justify-content: end;
	}

	&-box {
		.data-item {
			width: 25%;
			color: #fff;
			text-align: right;
		}
	}
}

.sign-gift-box {
	padding: 1rem 0.5rem;
	background: linear-gradient(to right bottom, #090919, #233a47);
	overflow: hidden;

	&::after {
		content: '';
		clear: both;
	}

	.sign-gift-item {
		width: calc(50% - 20px);
		float: left;
		margin: 0 10px 10px;
		box-sizing: border-box;
		border: 1px solid #6c43ff;
		border-radius: 4px;
		overflow: hidden;
	}

	.sign-gift-btn {
		width: 100%;
		height: 2rem;
		background: url('./btn.png') no-repeat;
		background-size: cover;
	}
	.sign-gift-disBtn {
		width: 100%;
		height: 2rem;
		background: url('./disBtn.png') no-repeat;
		background-size: cover;
	}

	.gift-box-item-up {
		display: flex;
		height: 2.8rem;
		align-items: center;
		background-color: #38334d;
	}

	.gift-box-item-left {
		display: block;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.8rem;
		height: 100%;
		text-align: center;
		color: #fff;
		white-space: nowrap;
		border-right: 1px solid #ba8dfe;
	}

	.gift-box-item-right {
		display: flex;
		flex: 1;
		overflow: hidden;
	}

	.img-box {
		width: 2rem;
		height: 2rem;
		overflow: hidden;
	}

	.gift-name {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: .8rem;
		color: #fff;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		box-sizing: border-box;
		margin: 0 20rpx;
	}
}

li {
	list-style-type: none;

}

.addreTitle {
	font-size: 32rpx;
	line-height: 48rpx;
	height: 48rpx;
	padding: 0 16rpx;
	margin-bottom: 24rpx;
}

.addres_box {
	padding: 0 24rpx;
	max-height: 610rpx;
}

.address_box {
	margin-bottom: 16rpx;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
}

.x-tag {
	line-height: 48rpx;
	display: inline-block;
	height: 48rpx;
	font-size: 32rpx;
	background-color: #ecf5ff;
	color: #409eff;
	border-radius: 8rpx;
	border: 2rpx solid #b3d8ff;
	padding: 0 20rpx;
	margin-right: 16rpx;
}

.address {
	height: 48rpx;
	line-height: 48rpx;
	font-size: 36rpx;
	font-weight: bold;
}

.consignee {
	font-size: 32rpx;
	margin-right: 40rpx;
}

.phone {
	font-size: 32rpx;
}

.foot_group {
	padding: 40rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.foot_group>span {
	display: inline-block;
	width: 300rpx;
	text-align: center;
	height: 60rpx;
	line-height: 60rpx;
	color: #fff;
	background-color: #6c43ff;
	border-radius: 30rpx;
}

.active {
	background-color: #ecf5ff;
}

.sign-progress-bar {
	overflow: hidden;
}
</style>
